<template>
    <div class="dashboard">
      <header class="header">
        <div class="logo">
          <img src="@/assets/svgs/logo.svg" alt="Logo" class="logo-image">
          <span class="title">智慧教室</span>
        </div>
        <div class="user-info" @click="toggleDropdown">
          <img class="avatar" src="@/assets/images/rainbow.jpg" alt="User Avatar">
          <span class="username">当前用户</span>
          <img class="dropdown-arrow" src="@/assets/svgs/downnarrow.svg" alt="Dropdown Arrow">
          <div v-if="dropdownVisible" class="dropdown-menu">
            <p @click="navigateTo('profile')">个人信息</p>
            <p @click="navigateTo('logout')">退出登录</p>
          </div>
        </div>
      </header>
      <div class="grid">
        <div class="grid-item" key="1" @click="$router.push('/ai')" style="background-color: #13227a; color: white;font-size: larger; display: flex; flex-direction: column; justify-content: center; align-items: center;">
          <div class="icon-title" style="display: flex; align-items: center; height: 50%;">
            <img class="icon large-icon" src="@/assets/svgs/robot2.svg" alt="Icon">
            <span>AI助手</span>
          </div>
          <p style="font-size: medium;">智能辅助教学，提升课堂效率</p>
        </div>
        
        <div class="grid-item" key="2" @click="navigateTo('mycourse')" style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
          <img class="icon large-icon" src="@/assets/svgs/course.svg" alt="Icon">
          <span>我的课程</span>
        </div>
        <div class="grid-item" key="3" @click="$router.push('/teacher/chat/index')" style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
          <img class="icon large-icon" src="@/assets/svgs/AIBot.svg" alt="Icon">
          <span>AIGC智能聊天室</span>
        </div>
        
        <div class="grid-item" key="4" @click="navigateTo('homework')" style="background-color: white; color: black; display: flex; flex-direction: column;">
          <div class="icon-title" style="display: flex; align-items: center; height: 25%;">
            <img class="icon small-icon" src="@/assets/svgs/signin.svg" alt="Icon">
            <span>AIGC智能作业</span>
          </div>
          <div class="completion-status" style="height: 75%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
            <div style="display: flex; justify-content: center; gap: 40px;">
              <div style="text-align: center;">
                <span class="number" style="margin-bottom: 15px; display: block;">{{ completedAssignments }}</span>
                <div>
                  <span style="white-space: nowrap;">已完成</span>
                </div>
              </div>
              
              <div style="text-align: center;">
                <span class="number" style="color: gray; margin-bottom: 15px; display: block;">{{ totalAssignments }}</span>
                <div>
                  <span style="white-space: nowrap;">总数</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="grid-item" key="5" @click="$router.push('/student/signin/index')" style="display: flex; flex-direction: column;">
          <div class="icon-title" style="display: flex; align-items: center; height: 25%;">
            <img class="icon small-icon" src="@/assets/svgs/record.svg" alt="Icon">
            <span>签到点名</span>
          </div>
          
          <div class="completion-status" style="height: 75%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
            <div style="display: flex; justify-content: center; gap: 40px;">
              <div style="text-align: center;">
                <span class="number" style="margin-bottom: 15px; display: block;">{{ completedAssignments }}</span>
                <div>
                  <span style="white-space: nowrap;">已完成</span>
                </div>
              </div>
              
              <div style="text-align: center;">
                <span class="number" style="color: gray; margin-bottom: 15px; display: block;">{{ totalAssignments }}</span>
                <div>
                  <span style="white-space: nowrap;">总数</span>
                </div>
              </div>
            </div>
          </div>
        </div>
  
        <div class="grid-item" key="6" @click="navigateTo('studentfeedback')" style="display: flex; flex-direction: column;">
          <div class="icon-title" style="display: flex; align-items: center; height: 25%;">
            <img class="icon small-icon" src="@/assets/svgs/feedback.svg" alt="Icon">
            <span>课堂质量实时反馈</span>
          </div>
          
          <div class="completion-status" style="height: 75%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
            <div style="display: flex; justify-content: center; gap: 40px;">
              <div style="text-align: center;">
                <span class="number" style="margin-bottom: 15px; display: block;">{{ completedAssignments }}</span>
                <div>
                  <span style="white-space: nowrap;">已完成</span>
                </div>
              </div>
              
              <div style="text-align: center;">
                <span class="number" style="color: gray; margin-bottom: 15px; display: block;">{{ totalAssignments }}</span>
                <div>
                  <span style="white-space: nowrap;">总数</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="showAlert" class="assign_aler">
    <p class="aler1"><span class="Xcancle" @click="assignCancle">X</span></p>
    <br>
    <div class="left_signin">
        <div class="gantan"><span style="margin-left: 6.5px;">!</span></div>
        <span class="title_signin">签到</span>
    </div>
    <div class="assign_click" @click="assignSuccess"><span style="margin-left: 5.3lvh;">签到</span></div>
  </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  
  const currentTime = ref('');
  const formattedTime = ref('');
  const dropdownVisible = ref(false);
  const completedAssignments = ref(5); // 示例已完成作业数
  const totalAssignments = ref(10); // 示例总作业数
  const router = useRouter();
  
  const toggleDropdown = () => {
    dropdownVisible.value = !dropdownVisible.value;
  };
  
  const showAlert = ref(true);
  const assignCancle = () => {
  showAlert.value = false;
  router.push('/student/dashboard');
};

const assignSuccess = () => {
  showAlert.value = true;
  ElMessage.success('签到成功');
  router.push('/student/dashboard');
};

  const navigateTo = (page) => {
    if (page === 'profile') {
      router.push('/profile');
    } else if (page === 'logout') {
      router.push('/logout');
    } else if (page === 'home') {
      router.push('/home');
    } else if (page === 'homework') {
      router.push('/student/homework/card');
    } else if (page === 'studentfeedback') {
      router.push('/student/feedback/card');
    } else if (page === 'mycourse') {
      router.push('/student/mycourse');
    }
  };
  
  onMounted(() => {
    setInterval(() => {
      const now = new Date();
      const dateString = now.toLocaleDateString();
      const timeString = now.toLocaleTimeString();
      if (classStatus.value === '没有上课') {
        formattedTime.value = `${dateString} ${timeString}`;
      } else {
        formattedTime.value = `${classStatus.value} - ${dateString} ${timeString}`;
      }
    }, 1000);
  });
  </script>
  
  <style>
.assign_aler {
  position: absolute;
  top: 25%;
  left: 28%;
  width: 40lvw;
  height: 50lvh;
  background-color: rgb(255, 255, 255);
  border: 1px solid #cccccc;
  z-index: 999;
  border-radius: 15px;
}

.aler1 {
  color: #6a6969;
  font-size: 20px;
  margin-left: 2%;
  font-weight: bold;
}

.Xcancle {
  float: right;
  margin-right: 5%;
}

.Xcancle:hover {
  color: #ff0202;
  cursor: pointer;
}

.left_signin{
  display: flex;
  flex-direction: row;
}
.gantan{
  font-size: 20px;
  font-weight: 1000;
  margin-left: 20px;
  line-height: 3lvh;
  border: 3px solid #1c1c1d;
  border-radius: 50%;
  height: 3lvh;
  width: 3lvh;
}

.assign_click{
    font-size: 70px;
  font-weight: 1000;
  line-height: 30lvh;
  color: #130ff6;
  margin-left: 24lvh;
  border: 10px solid #130ff6;
  border-radius: 50%;
  height: 30lvh;
  width: 30lvh;
}

.assign_click:hover{
  border-color: #b42d2d;
  color: #b42d2d;
}

.title_signin{
    float: left;
  font-size: 22px;
  font-weight: 700;
  color: #1c1c1d;
  margin-left: 10px;
}

  .dashboard {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f0f0f0; /* 浅灰色背景 */
  }
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #13227a;
    color: white;
    padding: 10px 20px;
  }
  
  .logo {
    display: flex;
    align-items: center;
    color: white;
    font-size: 18px;
    font-weight: bold;
  }
  
  .logo-image {
    width: 24px;
    height: 24px;
    margin-right: 10px;
  }
  
  .user-info {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
  }
  
  .avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
  }
  
  .dropdown-arrow {
    width: 16px;
    height: 16px;
    margin-left: 5px;
  }
  
  .dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: white;
    color: black;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 10px;
    z-index: 1000;
  }
  
  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px;
    flex: 1;
    width: 1000px; /* 调整总宽度 */
    margin: 50px auto; /* 增加上下边距，保持水平居中 */
    justify-content: center; /* 网格水平居中 */
    align-content: center; /* 网格垂直居中 */
  }
  
  .grid-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 靠左对齐 */
    align-items: center; /* 靠中对齐 */
    background-color: white;
    border-radius: 8px;
    width: 100%; /* 改为相对宽度 */
    height: 180px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  .completion-status {
    text-align: center; /* 居中对齐 */
  }
  
  .icon-title {
    display: flex;
    align-items: center;
  }
  
  .large-icon {
    width: 60px; /* 增大图标大小 */
    height: 60px; /* 增大图标大小 */
  }
  
  .small-icon {
    width: 30px; /* 减小图标大小 */
    height: 30px; /* 减小图标大小 */
  }
  
  .number {
    font-size: 32px; /* 增大数字部分的大小 */
    color: #13227a; /* 保持颜色 */
  }
  
  .text {
    color: gray; /* 改为灰色 */
  }
  
  .stats {
    display: flex;
    justify-content: space-between; /* 左右分布 */
    width: 100%;
    padding: 10px;
    position: absolute;
    bottom: 10px; /* 靠近底部 */
  }
  
  .stats .left {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* 右对齐 */
    margin-top: auto; /* 使其靠近下半部分 */
    margin-right: 20px; /* 增加右侧边距以增加距离 */
  }
  
  .stats .right {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 左对齐 */
    margin-top: auto; /* 使其靠近下半部分 */
  }
  </style>
  